<template>
  <div>
    <div class="manage">
      <div class="tableContainer">
        <el-table
          ref="table"
          v-loading="loading"
          border
          :data="tableData[currentPage - 1]"
          :header-cell-style="{height: '30px'}"
          :row-style="{height: '30px'}"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="id"
            label="用户编号"
          />
          <el-table-column
            align="center"
            prop="username"
            label="用户名"
            width="180"
          />
          <el-table-column
            align="center"
            prop="roleName"
            label="角色"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.roleName|getRoleType"
                disable-transitions
              >{{ scope.row.roleName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="modifyUserRole(scope.row),clickHandler($event)"
              ><i class="el-icon-refresh-right" /> 重置角色</el-button>
              <el-button
                type="warning"
                @click="resetUserPassword(scope.row),clickHandler($event)"
              > <i class="el-icon-edit" /> 重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-area">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="12"
          :total="allItems"
          @current-change="page"
        />
      </div>
    </div>

  </div>
</template>

<script>
import userApi from '@/api/user'
export default {
  filters: {
    // tag类型
    getRoleType(roleName) {
      const roleMap = {
        'admin': 'success',
        'manage': 'primary',
        'financial': 'primary',
        'worker': 'warning',
        'user': 'info'
      }
      return roleMap[roleName]
    }
  },

  inject: ['reload'],
  data() {
    return {
      tableData: [],
      allItems: 0,
      currentPage: 1,
      loading: true
    }
  },
  created() {
    this.initData()
  },
  methods: {

    initData() {
      userApi.getUsersInfo().then(resp => {
        this.loading = true
        const data = resp.data.data.usersInfo
        this.allItems = data.length
        for (let i = 0; i < data.length; i += 12) {
          this.tableData.push(data.slice(i, i + 12))
        }
        this.loading = false
      })
    },
    page(currentPage) {
      this.currentPage = currentPage
    },

    modifyUserRole(user) {
      this.$prompt('您想将其角色重置为：', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[a-z]+$/,
        inputErrorMessage: '请输入存在的角色名'
      }).then(({ value }) => {
        userApi.modifyUserRole(value, user.id).then(resp => {
          resp.data.code === 200 ? this.$message.success('重置角色成功！') : this.$message.error('重置角色失败！')
        }, err => {
          console.log(err)
          this.$message.error('网络错误！')
        })
        this.initData()
        this.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },

    resetUserPassword(user) {
      userApi.resetUserPassword(user.username).then(resp => {
        resp.data.code === 200 ? this.$message.success('密码已重置！') : this.$message.error('密码重置失败！')
      }, err => {
        console.log(err)
        this.$message.error('网络错误！')
      })
    }
  }

}
</script>

<style scoped>
.manage {
  display: flex;
  width: 850px;
  padding: 30px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.tableContainer {
  width: 100%;
}
.pagination-area {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
